/* eslint-disable max-lines-per-function */
import React, {useEffect, useState} from 'react';
import {Form} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {Select, Button} from 'antd';
import {getFieldValues} from '~/service/performance';
import {PERFORMANCE_RANK_DIMENSION} from '~/utils/const';
import {popUpContainer} from '../utils';
import './header.styl';

const {Option} = Select;

export default props => {
    const {
        serviceLine,
        serviceLineList,
        application,
        applicationList,
        setApplication,
        setServiceLineList,
        setApplicationList,
        setServiceLine,
        getFieldDecorator,
        setFieldsValue,
        resetFields,
    } = props;
    const [loading, setLoading] = useState(true);
    // 当业务线的值改变时，实现联动
    function handleServiceLine(val) {
        setServiceLine(val);
        setFieldsValue({serviceLineLabel: val});
        setApplication();
        resetFields();
    }
    function setApplicationChange(val) {
        setApplication(val);
        setFieldsValue({applicationLabel: val});
    }

    // 获取业务线数据
    useEffect(() => {
        (async () => {
            setLoading(true);
            const serviceLines = await getFieldValues({
                field: PERFORMANCE_RANK_DIMENSION.SERVICE_LINE,
                pager: PERFORMANCE_RANK_DIMENSION.PAGER,
            });
            setServiceLineList(serviceLines.data.values);
            setLoading(false);
        })();
    }, []);
    // 获取应用数据
    useEffect(() => {
        if (serviceLine !== '') {
            setLoading(true);
            (async () => {
                const applications = await getFieldValues({
                    field: PERFORMANCE_RANK_DIMENSION.APPLICATION,
                    bizTypeName: serviceLine,
                    pager: PERFORMANCE_RANK_DIMENSION.PAGER,
                });
                setApplicationList(applications.data.values);
                setLoading(false);
            })();
        }
    }, [serviceLine]);
    return (
        <div className="item">
            <Form.Item
                label="业务线"
            >
                <div className="item-option">
                    {getFieldDecorator('serviceLineLabel', {
                        rules: [
                            {
                                required: true,
                                message: '请选择业务线!',
                            },
                        ],
                        ...(serviceLine && {
                            initialValue: serviceLine
                        })
                    })(
                        <Select
                            placeholder="请选择"
                            style={{width: 200}}
                            onChange={handleServiceLine}
                            getPopupContainer={popUpContainer}
                            className="serviceLine"
                            showSearch
                            optionFilterProp="children"
                        >
                            {serviceLineList.map(serviceLine => (
                                <Option key={serviceLine} value={serviceLine} title={serviceLine}>
                                    {serviceLine}
                                </Option>
                            ))}
                        </Select>
                    )}
                </div>
            </Form.Item>
            <Form.Item
                label="应用"
            >
                <div className="item-option">
                    {getFieldDecorator('applicationLabel', {
                        rules: [
                            {
                                required: true,
                                message: '请选择应用!',
                            },
                        ],
                        ...(serviceLine && {
                            initialValue: application
                        })
                    })(
                        <Select
                            placeholder="请选择"
                            style={{width: 200}}
                            onChange={setApplicationChange}
                            getPopupContainer={popUpContainer}
                            showSearch
                            optionFilterProp="children"
                        >
                            {applicationList.map(application => (
                                <Option key={application} value={application} title={application}>
                                    {application}
                                </Option>
                            ))}
                        </Select>
                    )}
                </div>
            </Form.Item>
        </div>
    );
};
